const obj = {
  locateCableSection(id) {
    const tempDataSourceId = 'temp-highlight-cablesection'
    const layerId = tempDataSourceId + '-layer'
    if (this.map.getLayer(layerId)) {
      this.map.removeLayer(layerId)
    }
    if (this.map.getSource(tempDataSourceId)) {
      this.map.removeSource(tempDataSourceId)
    }
    selectSql(`select * from tzinfo where id='${id}'`).then((result) => {
      console.log('sqlite result:', result)
      const targetGeometry = result[0].pos

      this.map.addSource(tempDataSourceId, {
        type: 'geojson',
        data: {
          type: 'FeatureCollection',
          features: [targetGeometry],
        },
      })

      this.map.addLayer({
        id: layerId,
        source: tempDataSourceId,
        type: 'line',

        paint: {
          'line-color': 'rgba(0,0,254,1)',
          'line-width': 2,
          'line-dasharray': [2, 4],
        },
      })
      const coordinates = targetGeometry.geometry.coordinates
      const bounds = new mapboxgl.LngLatBounds(
        coordinates[0][0],
        coordinates[0][1]
      )
      for (const coord of coordinates) {
        bounds.extend(coord[0])
        bounds.extend(coord[1])
      }

      this.map.fitBounds(bounds, {
        padding: 20,
      })
    })
  },
}
